<template>
    <div class="wrap">
        <van-nav-bar
            title="我的卡券"
            right-text="使用规则"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <!-- 优惠券搜索 -->
        <div class="getCoupon">
            <van-search v-model="value" placeholder="请输入优惠券" clearable/>
            <div style="width:100%;padding:0 16px"><van-button class="bottom-button">兑换</van-button></div> 
            <ul class="couponTimer">
                <li @click="coupon(1)" :class="{border:num===1}">未过期</li>
                <li @click="coupon(2)" :class="{border:num===2}">已过期</li>
            </ul>
        </div>
        <div class="coupon">
            <van-empty 
            description="目前没有卡券" />
        </div>
        

    </div>
</template>

<script>
    export default {
    data() {
        return {
            value:'',
            num:1
        };
    },

    components: {},

    computed: {},

    mounted() {},

    methods: {
        coupon(num){    // 卡券
            if(num===1){    // 进入未过期卡券
                this.num=num
            }else{          // 进入已过期卡券
                this.num=num
            }
        },
        onClickLeft() {     // 左箭头回退
            this.$router.go(-1)
            this.$store.commit('changeShowMine',true)
        },
        onClickRight() {    // 进入使用规则
            // this.$router.push('/mine/InMine/history')
        },
    }
};
</script>
<style lang='stylus' scoped>
// 主页面全屏
.wrap 
    background #eee
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index 350
    font-size 16px
    .getCoupon
        width 100%
        background #fff
        display flex
        flex-direction column
        align-items center
        li  
            width 50%
            height 40px
            text-align center
            line-height 40px
            border 0
        .border
            border-bottom 2px solid #CD003D
        .couponTimer
            width 100%
            display flex
            justify-content space-around
        .van-search
            width 100%
            padding 10px 16px



// 改变Vant默认颜色
/deep/ .van-nav-bar__text 
    color #CA013D
/deep/ .van-nav-bar__arrow
    color #4E4E4E
.bottom-button 
    width 343px
    height 40px
    background #CD003D
    color #fff
</style>
